{% extends 'base/base1.html' %}
{% load static %}

{% block title %}用户管理{% endblock %}

{% block css %}
<style>
    .user-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
        padding: 20px;
    }
    
    .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .stats-badge {
        background: #e9ecef;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        margin-right: 10px;
    }
</style>
{% endblock %}

{% block main %}
<div class="container-fluid">
    <h2>用户管理</h2>
    
    <div class="mb-3 d-flex justify-content-between align-items-center">
        <p>总用户数：{{ users|length }}</p>
        <a href="{% url 'main:user_create' %}" class="btn btn-primary">添加用户</a>
    </div>
    
    {% for user in users %}
    <div class="user-card">
        <div class="row align-items-center">
            <div class="col-md-1">
                {% if user.header %}
                    <img src="{{ user.header.url }}" alt="{{ user.username }}" class="user-avatar">
                {% else %}
                    <div class="user-avatar bg-secondary d-flex align-items-center justify-content-center text-white">
                        {{ user.username|first|upper }}
                    </div>
                {% endif %}
            </div>
            <div class="col-md-7">
                <h5>{{ user.username }}</h5>
                <p class="mb-1">
                    <strong>邮箱：</strong>{{ user.email|default:"未设置" }}
                </p>
                <p class="mb-1">
                    <strong>注册时间：</strong>{{ user.date_joined|date:"Y-m-d H:i" }}
                </p>
                <p class="mb-0">
                    <span class="stats-badge">订单数：{{ user.order_count }}</span>
                    {% if user.is_staff %}
                        <span class="badge badge-warning">管理员</span>
                    {% endif %}
                    {% if user.is_superuser %}
                        <span class="badge badge-danger">超级管理员</span>
                    {% endif %}
                </p>
            </div>
            <div class="col-md-4 text-right">
                <div class="btn-group">
                    <a href="{% url 'main:user_detail' user.pk %}" class="btn btn-info btn-sm">查看</a>
                    <a href="{% url 'main:user_update' user.pk %}" class="btn btn-warning btn-sm">编辑</a>
                    <a href="{% url 'main:user_delete' user.pk %}" class="btn btn-danger btn-sm">删除</a>
                </div>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="text-center">
        <h4>暂无用户数据</h4>
    </div>
    {% endfor %}
    
    <!-- 分页 -->
    {% if page_obj.has_other_pages %}
    <nav>
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
                </li>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                {% else %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
                </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}